<template>
  <div :class="layoutCls">
    <t-head-menu :class="menuCls" :theme="menuTheme" expand-type="popup" :value="active">
      <template #logo>
        <span v-if="showLogo" class="header-logo-container" @click="handleNav('/dashboard/base')">
          <logo-full class="t-logo" />
        </span>
        <div v-else class="header-operate-left">
          <t-button theme="default" shape="square" variant="text" @click="changeCollapsed">
            <t-icon class="collapsed-icon" name="view-list" />
          </t-button>
          <search :layout="layout" />
        </div>
      </template>
      <template v-if="layout !== 'side'" #default>
        <menu-content class="header-menu" :nav-data="menu" />
      </template>
      <template #operations>
        <div class="operations-container">
          <!-- 搜索框 -->
          <search v-if="layout !== 'side'" :layout="layout" />

          <!-- 全局通知 -->
          <notice />

          <t-tooltip placement="bottom" content="gitee">
            <t-button theme="default" shape="square" variant="text" @click="navToGitee">
              <t-icon name="git-repository" />
            </t-button>
          </t-tooltip>

          <t-tooltip placement="bottom" content="github">
            <t-button theme="default" shape="square" variant="text" @click="navToGithub">
              <t-icon name="logo-github" />
            </t-button>
          </t-tooltip>
          <t-tooltip v-auth="'i18n:add'" placement="bottom" :content="$t('i18n.button.add')">
            <t-button theme="default" shape="square" variant="text" @click="addLanguage">
              <t-icon name="translate-1" />
            </t-button>
          </t-tooltip>
          <!-- <t-tooltip placement="bottom" content="帮助文档">
            <t-button theme="default" shape="square" variant="text" @click="navToHelper">
              <t-icon name="help-circle" />
            </t-button>
          </t-tooltip> -->
          <t-dropdown :options="languages" trigger="click" @click="languageClickHandler">
            <t-space>
              <t-button variant="text">
                {{ $t('head.language') + ':' + languagesSelect }}
                <template #suffix> <t-icon name="chevron-down" size="16" /></template>
              </t-button>
            </t-space>
          </t-dropdown>
          <t-dropdown :min-column-width="120" trigger="click">
            <template #dropdown>
              <t-dropdown-menu>
                <t-dropdown-item class="operations-dropdown-container-item" @click="handleNav('/profile')">
                  <t-icon name="user-circle"></t-icon>
                  {{ $t('head.Setting') }}
                </t-dropdown-item>
                <t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout">
                  <t-icon name="poweroff"></t-icon>{{ $t('head.logout') }}
                </t-dropdown-item>
              </t-dropdown-menu>
            </template>
            <t-button class="header-user-btn" theme="default" variant="text">
              <template #icon>
                <t-icon class="header-user-avatar" name="user-circle" />
              </template>
              <div class="header-user-account">{{ user.userInfo.userName }}</div>
              <template #suffix><t-icon name="chevron-down" /></template>
            </t-button>
          </t-dropdown>
          <t-tooltip placement="bottom" :content="$t('head.systemSetting')">
            <t-button theme="default" shape="square" variant="text" @click="toggleSettingPanel">
              <t-icon name="setting" />
            </t-button>
          </t-tooltip>
        </div>
      </template>
    </t-head-menu>

    <t-dialog v-model:visible="i18nFromVisible" :footer="false" width="500px" top="20px">
      <template #header>{{ $t('i18n.button.add') }}</template>
      <t-form ref="form" colon reset-type="initial" :rules="FORM_I18N" :data="i18nFormData" @reset="loadI18n" @submit="i18nFromOnSubmit">
      <t-form-item :label="$t('i18n.label.code')" name="i18nKey">
        <t-input v-model="i18nFormData.i18nKey" :placeholder="$t('i18n.label.pl.code')"></t-input>
      </t-form-item>
      <t-form-item :label="$t('i18n.label.tag')" name="i18nTag">
        <SelectDict
          :dictType="I18N_TAG"
          v-model:value="i18nFormData.i18nTag"
        ></SelectDict>
      </t-form-item>
      <t-form-item v-for="(item, index) in i18nFormData.i18nInputs" :label="item.language" :name="item.language">
        <t-input v-model="item.i18nValue" :placeholder="$t('i18n.pl.trends', [item.language])"></t-input>
      </t-form-item>
      <t-form-item>
        <t-space size="small">
          <t-button theme="primary" type="submit" :loading="i18nFromLoading">{{ $t('common.button.submit') }}</t-button>
          <t-button theme="default" variant="base" type="reset" :loading="i18nFromLoading">{{ $t('common.button.reset1')
          }}</t-button>
        </t-space>
      </t-form-item>
    </t-form>
    </t-dialog>
  </div>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';
import { computed, onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import LogoFull from '@/assets/assets-logo-full.svg?component';
import { prefix } from '@/config/global';
import { getActive } from '@/router';
import { useSettingStore, useUserStore, useI18nStore, useDictStore } from '@/store';
import type { MenuRoute } from '@/types/interface';
import SelectDict from '@/components/dict/SelectDict.vue';
import MenuContent from './MenuContent.vue';
import Notice from './Notice.vue';
import Search from './Search.vue';
import { logout, setLanguagePreference } from '@/api/auth';
import { saveI18n } from '@/api/system/i18n';
import { DropdownOption, FormRules, MessagePlugin, SubmitContext } from 'tdesign-vue-next';
import { ResultEnum } from '@/enums/httpEnum';
import { I18nData, I18nInputs } from '@/api/system/i18n/types';
import i18n from '@/i18n';
import { DictData } from '@/api/system/dict/types';
import { I18N_TAG } from '@/constants/dictTypes';

const props = defineProps({
  theme: {
    type: String,
    default: 'light',
  },
  layout: {
    type: String,
    default: 'top',
  },
  showLogo: {
    type: Boolean,
    default: true,
  },
  menu: {
    type: Array as PropType<MenuRoute[]>,
    default: () => [],
  },
  isFixed: {
    type: Boolean,
    default: false,
  },
  isCompact: {
    type: Boolean,
    default: false,
  },
  maxLevel: {
    type: Number,
    default: 3,
  },
});
const dictStore = useDictStore()
const i18nStore = useI18nStore()
const router = useRouter();
const settingStore = useSettingStore();
const user = useUserStore();
//i18n表单标签
const i18nFromLoading = ref(false);
// 控制i18n表单显示
const i18nFromVisible = ref(false)
// i18n 标签
const i18nTagSelectOption = ref<DictData[]>()
// i18n表单对象
const i18nFormData = ref<I18nData>({
  i18nKey: '',
  i18nTag: '',
  i18nInputs: []
});
// i18n表单校验
const FORM_I18N = ref<FormRules>({
  dictLabel: [{ required: true, message: i18n.global.t('i18n.label.pl.code'), trigger: 'blur' }],
})
const toggleSettingPanel = () => {
  settingStore.updateConfig({
    showSettingPanel: true,
  });
}; Reflect
const lang = ref(user.userInfo.language)
const languages = ref([]);
const i18nDictMap = reactive({})
const languagesSelect = ref();
const active = computed(() => getActive());

const layoutCls = computed(() => [`${prefix}-header-layout`]);

const menuCls = computed(() => {
  const { isFixed, layout, isCompact } = props;
  return [
    {
      [`${prefix}-header-menu`]: !isFixed,
      [`${prefix}-header-menu-fixed`]: isFixed,
      [`${prefix}-header-menu-fixed-side`]: layout === 'side' && isFixed,
      [`${prefix}-header-menu-fixed-side-compact`]: layout === 'side' && isFixed && isCompact,
    },
  ];
});
const menuTheme = computed(() => props.theme as 'light' | 'dark');
const changeCollapsed = () => {
  settingStore.updateConfig({
    isSidebarCompact: !settingStore.isSidebarCompact,
  });
};

const handleNav = (url: string) => {
  router.push(url);
};

const languageClickHandler = async (dropdownItem: DropdownOption) => {
  const { code, result } = await setLanguagePreference(dropdownItem.value as string);
  if (ResultEnum.SUCCESS === code) {
    await i18nStore.changeLanguage(dropdownItem.value as string)
    languagesSelect.value = Reflect.get(i18nDictMap, dropdownItem.value as string);
  }

};


const handleLogout = async () => {
  await logout();
  router.push({
    path: '/login',
    query: { redirect: encodeURIComponent(router.currentRoute.value.fullPath) },
  });
};

/**
 * 前往gitee代码地址
 */
const navToGitee = () => {
  window.open('https://gitee.com/wu-zhihao/poem-solon');
};

/**
 * 前往github代码地址
 */
const navToGithub = () => {
  window.open('https://github.com/Hans-Wu-cn/poem-solon');
};

/**
 * 添加语言事件
 * 用于控制显示i18n表单dialog
 */
const addLanguage = () => {
  i18nFromVisible.value=true;
};


/**
 * 加载语言
 */
const loadI18n = async (i18ns: DictData[]) => {
  const i18nInputs: Array<I18nInputs> = [];
  i18ns.forEach(item => {
    i18nInputs.push({
      language: item.dictValue,
      i18nValue: undefined
    })
  })
  i18nFormData.value.i18nInputs = i18nInputs
}

/**
 * 加载语言标签
 */
const loadI18nTag = async () => {
  const i18nTags = await dictStore.i18nTagDictHook();
  i18nTagSelectOption.value = i18nTags
  i18nFormData.value.i18nTag = i18nTags[0].dictValue
}
/**
 * i18n表单提交时间
 * @param param0 表单验证
 */
 const i18nFromOnSubmit = async ({ validateResult }: SubmitContext<DictData>) => {
  if (validateResult === true) {
    i18nFromLoading.value = true
    const res = await saveI18n(i18nFormData.value);
    if (res.code === ResultEnum.SUCCESS) {
      MessagePlugin.success(i18n.global.t('common.message.submitSuccess'));
    }
    i18nFromLoading.value = false
  }
};

onMounted(async () => {

  const i18ns = await dictStore.i18nDictHook();
  i18ns.forEach(item => {
    languages.value.push({ content: item.dictLabel, value: item.dictValue })
    Reflect.set(i18nDictMap, item.dictValue, item.dictLabel)
  })
  languagesSelect.value = Reflect.get(i18nDictMap, lang.value);
  await loadI18n(i18ns)
  // await loadI18nTag();
});
</script>
<style lang="less" scoped>
.@{starter-prefix}-header {
  &-menu-fixed {
    position: fixed;
    top: 0;
    z-index: 1001;

    :deep(.t-head-menu__inner) {
      padding-right: var(--td-comp-margin-xl);
    }

    &-side {
      left: 232px;
      right: 0;
      z-index: 10;
      width: auto;
      transition: all 0.3s;

      &-compact {
        left: 64px;
      }
    }
  }

  &-logo-container {
    cursor: pointer;
    display: inline-flex;
  }
}

.header-menu {
  flex: 1 1 1;
  display: inline-flex;

  :deep(.t-menu__item) {
    min-width: unset;
  }
}

.operations-container {
  display: flex;
  align-items: center;

  .t-popup__reference {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .t-button {
    margin-left: var(--td-comp-margin-l);
  }
}

.header-operate-left {
  display: flex;
  align-items: normal;
  line-height: 0;
  padding-left: var(--td-comp-margin-xl);
}

.header-logo-container {
  width: 184px;
  height: 26px;
  display: flex;
  margin-left: 24px;
  color: var(--td-text-color-primary);

  .t-logo {
    width: 100%;
    height: 100%;

    &:hover {
      cursor: pointer;
    }
  }

  &:hover {
    cursor: pointer;
  }
}

.header-user-account {
  display: inline-flex;
  align-items: center;
  color: var(--td-text-color-primary);
}

:deep(.t-head-menu__inner) {
  border-bottom: 1px solid var(--td-component-stroke);
}

.t-menu--light {
  .header-user-account {
    color: var(--td-text-color-primary);
  }
}

.t-menu--dark {
  .t-head-menu__inner {
    border-bottom: 1px solid var(--td-gray-color-10);
  }

  .header-user-account {
    color: rgba(255, 255, 255, 0.55);
  }
}

.operations-dropdown-container-item {
  width: 100%;
  display: flex;
  align-items: center;

  :deep(.t-dropdown__item-text) {
    display: flex;
    align-items: center;
  }

  .t-icon {
    font-size: var(--td-comp-size-xxxs);
    margin-right: var(--td-comp-margin-s);
  }

  :deep(.t-dropdown__item) {
    width: 100%;
    margin-bottom: 0px;
  }

  &:last-child {
    :deep(.t-dropdown__item) {
      margin-bottom: 8px;
    }
  }
}
</style>

<!-- eslint-disable-next-line vue-scoped-css/enforce-style-type -->
<style lang="less">
.operations-dropdown-container-item {
  .t-dropdown__item-text {
    display: flex;
    align-items: center;
  }
}
</style>
@/api/system/i18n@/api/system/i18n/types